(function () {
  const oContainer = document.querySelector('.carousel')
  const oImgBox = oContainer.querySelector('.imgs')
  const oPrev = oContainer.querySelector('.prev')
  const oNext = oContainer.querySelector('.next')
  const aImgs = oContainer.querySelectorAll('.imgs-wrap')
  const moveTimes = aImgs.length - 3 // 能翻页的次数
  let currTime = 0


  changeBtn()
  oPrev.onclick = oNext.onclick = function () {
    if (this == oPrev) {
      if (currTime > 0) {
        currTime--
        changeImg()
      }
    } else {
      if (currTime < moveTimes) {
        currTime++
        changeImg()
      }
    }
    console.log(currTime);
  }

  function changeImg() {
    oImgBox.style.left = -((aImgs[0].offsetWidth + 30) * currTime) + 'px'
    changeBtn()
  }

  function changeBtn() {
    if (currTime <= 0) {
      oPrev.classList.add('invalid')
    } else {
      oPrev.classList.remove('invalid')
    }

    if (currTime >= moveTimes) {
      oNext.classList.add('invalid')
    } else {
      oNext.classList.remove('invalid')
    }

  }
  let timer
  function go() {
    timer = setInterval(() => {
      if (currTime == moveTimes) {
        currTime = -1
      }
      oNext.onclick()
    }, 2000);
  }
  go()
  oContainer.onmouseover = function () {
    clearInterval(timer)
  }
  oContainer.onmouseout = function () {
    go()
  }
})()

